<template>
  <div>
    <div class="page-form">
      <el-select
        v-model="queryParams.examSubjectId"
        placeholder="选择考试"
        clearable
        @change="handleSearch"
      >
        <el-option
          v-for="item in kmlb"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <el-table
      stripe
      border
      ref="tableList"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column
        type="selection"
        width="55"
        align="center"
        :reserve-selection="true"
      /> -->
      <el-table-column
        label="考试"
        align="center"
        prop="subjectName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="上报人数"
        align="center"
        prop="reportedNumber"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="已上传"
        align="center"
        prop="uploadedNumber"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="未上传"
        align="center"
        prop="notUploadedNumber"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="考号异常"
        align="center"
        prop="examNumberAbnormal"
        :show-overflow-tooltip="true"
        class-name="color-danger"
      />
      <el-table-column
        label="上传比例"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.uploadProgress }}%
        </template>
      </el-table-column>
      <el-table-column
        label="缺考人数"
        align="center"
        prop="missingExamNumber"
        :show-overflow-tooltip="true"
        class-name="color-danger"
      />

      <el-table-column
        label="选项异常"
        align="center"
        prop="optionAbnormalNumber"
        :show-overflow-tooltip="true"
        class-name="color-danger"
      />
      <el-table-column
        label="操作"
        align="center"
        width="140"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-link type="primary" @click="xq(scope.row)">查看详情</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-bottom">
      <div class="sel-box">
        <p>共 {{ total }} 项</p>
        <el-button type="primary" @click="dc">导出校级上传情况</el-button>
        <el-button type="primary" @click="getList()" :loading="loading"
          >刷新</el-button
        >
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { scanQuestionCardSubjectList } from "@/api/xmgl/tkcx";
import { debounce } from "lodash";
export default {
  props: {
    xmxx: {},
    kmlb: null,
  },
  data() {
    return {
      total: 0,
      ids: [],
      tableData: [],
      multiple: true,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    debouncedSearch: debounce(function () {
      this.queryParams.pageNum = 1;
      this.getList();
    }, 500),
    handleSearch() {
      this.debouncedSearch();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    getList() {
      this.loading = true;
      this.tableData = [];
      scanQuestionCardSubjectList({
        ...this.queryParams,
        examId: this.xmxx.id,
      })
        .then((response) => {
          this.total = response.data.total;
          this.tableData = response.data.records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    xq(row) {
      this.$store.dispatch("app/setIsRefresh", true).then((res) => {
        this.$router.push({
          path: "/kwgl/tkxq/index",
          query: {
            subjectId: row.subjectId,
          },
        });
      });
    },
    dc() {
      this.download(
        "/scan/question/card/school/list/export",
        {
          examId: this.xmxx.id,
        },
        ``
      );
    },
  },
};
</script>

<style>
</style>